<!-- <template>
    <el-card v-for="(item, index) in comment" :key="index" class="card-body">
        <p>{{ item.stuName }}</p>
        <div>
            <span>{{ item.content }}</span>
        </div>
    </el-card>
    <el-upload action="http://localhost:8080/upload" name="filename" list-type="picture-card" :auto-upload="true" limit="1">
        <el-icon>
            <Plus />
        </el-icon>
    </el-upload> -->



    <!-- <el-table :data="tableData" height="250"> -->
        <!-- 自定义筛选按钮 -->
        <!-- <template #filter="{ column, prop }">
            <el-button type="primary">{{ column.label }}</el-button>
        </template> -->

        <!-- 自定义筛选下拉框 -->
        <!-- <template #filter-dropdown="{ column }">
            <el-popover placement="bottom-start" v-model="column.filterVisible">
                <el-input v-model="column.filterValue" placeholder="请输入内容" size="mini"
                    @input.native="handleFilterInput(column)" />
                <div style="margin: 5px;">
                    <el-button size="mini" type="primary" @click="handleConfirmFilter(column)">确定</el-button>
                    <el-button size="mini" @click="handleResetFilter(column)">重置</el-button>
                </div>
                <div :style="{ maxHeight: '200px', overflow: 'auto' }">
                    <el-checkbox-group v-model="column.filteredValue" @change="handleFilterChange(column)">
                        <el-checkbox :label="item.value" :disabled="item.disabled" v-for="item in column.options"
                            :key="item.value">{{ item.label }}</el-checkbox>
                    </el-checkbox-group>
                </div> -->
                <!-- 修改筛选按钮的样式 -->
                <!-- <el-button slot="reference" type="primary" :icon="column.filterIcon" class="custom-filter-btn"></el-button>
            </el-popover>
        </template>

        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />

    </el-table>

    <el-table :data="tableData"> -->
        <!-- 使用 filter 插槽自定义筛选按钮 -->
        <!-- <template #filter="{ column }">
            <el-button type="primary" :icon="column.filterIcon" class="filter-btn"></el-button>
        </template>

        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />

    </el-table>

    <el-radio-group v-model="radio">
        <el-radio :label="1">学生</el-radio>
        <el-radio :label="2">校内老师</el-radio>
        <el-radio :label="3">企业教师</el-radio>
        <el-radio :label="4">管理员</el-radio>
        <el-radio :label="5">企业</el-radio>
    </el-radio-group>


    <el-button @click="tryy">传值</el-button>
</template> -->
<!-- <script setup>
import { ref, reactive } from 'vue';

const comment = ref([
    {
        stuName: '路人甲',
        content: '这是一个评价',
    },
    {
        stuName: '路人乙',
        content: '这是一个评价',
    },
    {
        stuName: '路人丙',
        content: '这是一个评价',
    },
])

const radio= ref('1')

function handleRadioChange(val) {
    indentity.value.radio = val
}

const tableData = ref([
    {
        name: '王二',
        age: '12'
    }
])

const tableDa = ref([
    {
        text: '王二',
        value: '王二',
    }
])


const trys = ref([
    {
        text: '111'
    },
    {
        text: '222'
    },
    {
        text: '333'
    },
    {
        text: '444'
    },
])

const tryys = reactive([

])

function tryy() {

for (let i = 0; i < trys.value.length; i++) {
    const obj = {}//每次循环创建一个新的对象
    obj.text = trys.value[i].text
    obj.value = trys.value[i].text
    tryys.push(obj);
    // tryys[i].value = 

}
console.log(tryys);
}
tryy();

// text @click="dialogVisible = true"

// <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
//                 <span>是否确定解散小队</span>
//                 <template #footer>
//                     <span class="dialog-footer">
//                         <el-button @click="dialogVisible = false">取消</el-button>
//                         <el-button type="danger" @click="deleteTeam">
//                             确认
//                         </el-button>
//                     </span>
//                 </template>
//             </el-dialog>

// //弹窗
// const dialogVisible = ref(false)

// const handleClose = function (done) {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(function () {
//       done()
//     })
//     .catch(function () {
//     })
// }
</script> -->


<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="Password" prop="pass">
            <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Confirm" prop="checkPass">
            <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="Age" prop="age">
            <el-input v-model.number="ruleForm.age" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </el-form-item>
    </el-form>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the age'))
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('Please input digits'))
        } else {
            if (value < 18) {
                callback(new Error('Age must be greater than 18'))
            } else {
                callback()
            }
        }
    }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the password'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('Please input the password again'))
    } else if (value !== ruleForm.pass) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    pass: '',
    checkPass: '',
    age: '',
})

const rules = reactive<FormRules>({
    pass: [{ validator: validatePass, trigger: 'blur' }],
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
    age: [{ validator: checkAge, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
  